<!-- 从front-page项目合并的首页 -->
<template>
  <div class="dashboard-container">
    <div class="main-content">
      <div class="header">
        <h1>智慧茶园生态看板</h1>
      </div>
      
      <div class="stat-cards">
        <div class="custom-stat-card blue-card">
          <div class="icon-box">
            <svg-icon icon-class="tearoom" class-name="icon-svg" />
          </div>
          <div class="content">
            <div class="title">茶园面积</div>
            <div class="value">120亩</div>
          </div>
        </div>
        
        <div class="custom-stat-card green-card">
          <div class="icon-box">
            <svg-icon icon-class="tea" class-name="icon-svg" />
          </div>
          <div class="content">
            <div class="title">茶叶产量</div>
            <div class="value">85kg</div>
            <div class="change">+12</div>
          </div>
        </div>
        
        <div class="custom-stat-card yellow-card">
          <div class="icon-box">
            <svg-icon icon-class="bug" class-name="icon-svg" />
          </div>
          <div class="content">
            <div class="title">虫情预警</div>
            <div class="value">低</div>
          </div>
        </div>
        
        <div class="custom-stat-card green-card">
          <div class="icon-box">
            <svg-icon icon-class="monitor" class-name="icon-svg" />
          </div>
          <div class="content">
            <div class="title">设备状况</div>
            <div class="value">正常</div>
          </div>
        </div>
      </div>
      
      <div class="charts-container">
        <div class="chart-section">
          <div class="chart-item">
            <div class="chart-title">
              <svg-icon icon-class="chart" class-name="icon-svg" />
              <span>茶管理分布</span>
            </div>
            <Chart chartType="pie" title="" />
          </div>
          
          <div class="chart-item">
            <div class="chart-title">
              <svg-icon icon-class="weather" class-name="icon-svg" />
              <span>气象情况</span>
            </div>
            <Chart ref="weatherChartRef" chartType="bar" title="" />
          </div>
        </div>
        
        <!-- 虫情防治日历和措施区域 -->
        <div class="pest-calendar-section">
          <div class="section-title">
            <svg-icon icon-class="date" class-name="icon-svg" />
            <span>虫情防治措施</span>
          </div>
          <div class="pest-calendar-container">
            <!-- 环境健康指数区域 -->
            <div class="calendar-wrapper">
              <PestHistory ref="pestHistoryRef" />
            </div>
            
            <!-- 虫情防治措施和日历区域 -->
            <div class="measures-wrapper">
              <div class="measures-content">
                <PestMeasures ref="pestMeasuresRef" />
                <PestCalendar @daySelected="handleDateSelect" class="calendar-component" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import StatCard from '@/components/Homepage/StatCard.vue'
import Chart from '@/components/Homepage/Chart.vue'
import PestCalendar from '@/components/Homepage/PestCalendar.vue'
import PestMeasures from '@/components/Homepage/PestMeasures.vue'
import PestHistory from '@/components/Homepage/PestHistory.vue'
import EnvHealthIndex from '@/components/Homepage/EnvHealthIndex.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'

// 用于存储日历选中的日期
const selectedDate = ref(null);
// 组件引用
const pestHistoryRef = ref(null);
const pestMeasuresRef = ref(null);
const envHealthIndexRef = ref(null);
const chartRef = ref(null);
const weatherChartRef = ref(null);

// 日历日期选中事件处理
function handleDateSelect(day) {
  selectedDate.value = day;
  
  // 更新环境健康指数数据
  if (pestHistoryRef.value && day.date) {
    pestHistoryRef.value.updateData(day.date);
  }
  
  // 更新虫情防治措施
  if (pestMeasuresRef.value) {
    pestMeasuresRef.value.updateMeasures(day);
  }
  
  // 更新气象情况图表
  if (weatherChartRef.value && weatherChartRef.value.updateWeatherData) {
    weatherChartRef.value.updateWeatherData(day.date);
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 12px 12px 12px 8px; /* 减小内边距 */
  min-height: 98vh;
}

.header {
  margin-bottom: 12px; /* 减小标题下方间距 */
}

.header h1 {
  font-size: 20px; /* 减小标题字号 */
  font-weight: 600;
  color: #333;
  margin: 0;
}

.stat-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.custom-stat-card {
  flex: 1;
  display: flex;
  padding: 15px; /* 从20px减小到15px，减少10px总高度 */
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
  background-color: white;
}

.custom-stat-card:hover {
  transform: translateY(-5px) translateY(3px) translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  animation: cardPulse 1s infinite alternate;
}

@keyframes cardPulse {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

.blue-card {
  border-left-color: #4096ff;
}

.blue-card .icon-box {
  background-color: rgba(64, 150, 255, 0.15);
  color: #4096ff;
}

.green-card {
  border-left-color: #52c41a;
}

.green-card .icon-box {
  background-color: rgba(82, 196, 26, 0.15);
  color: #52c41a;
}

.yellow-card {
  border-left-color: #faad14;
}

.yellow-card .icon-box {
  background-color: rgba(250, 173, 20, 0.15);
  color: #faad14;
}

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  margin-right: 15px;
  font-size: 24px;
}

.icon-svg {
  font-size: 24px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.title {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.value {
  font-size: 22px;
  font-weight: 600;
  color: #333;
}

.change {
  font-size: 12px;
  color: #52c41a;
  margin-top: 2px;
}

.charts-container {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: flex-start;
}

.chart-section {
  flex: 0.99; /* 从1.02减小到0.99，向左减少10px */
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 393px;
}

.chart-item {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 12px 10px 20px 12px;
  height: 393px; /* 从403px减小到393px，减少10px高度 */
  overflow: hidden;
}

.chart-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px; /* 减小标题下方间距 */
  display: flex;
  align-items: center;
}

.chart-title i {
  margin-right: 8px;
  color: #409EFF;
}

.pest-calendar-section {
  flex: 1.01;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  overflow: visible;
  display: flex;
  flex-direction: column;
  height: 800px; /* 虫情防治措施高度*/
  margin-left: 0px;
}

.section-title {
  padding: 8px 12px; /* 减小标题区域的内边距 */
  border-bottom: 1px solid #eee;
  font-weight: 500;
  display: flex;
  align-items: center;
  font-size: 14px; /* 减小标题字号 */
}

.section-title i {
  margin-right: 8px;
  color: #409EFF;
}

.pest-calendar-container {
  display: flex;
  flex-direction: column;
  height: auto !important; /* 改为自动高度 */
  padding: 8px 8px 16px 8px;
  gap: 0;
  overflow: visible;
  max-height: none !important; /* 移除最大高度限制 */
}

.calendar-wrapper {
  margin-bottom: -6px; /* 减小负边距 */
  transform: scale(0.95); /* 缩小5% */
  transform-origin: top left; /* 从左上角开始缩放 */
  width: 105.26%; /* 约等于1/0.95，使内容在缩放后仍能完整显示 */
  height: auto;
  position: relative;
  z-index: 10;
}

.pest-calendar-container .calendar {
  min-height: 220px; /* 减小日历组件高度 */
  margin-bottom: 10px;
}

.pest-calendar-container .pest-history {
  min-height: 150px;
  width: 350px; /* 修改为固定宽度350px */
  flex: 0 0 350px; /* 固定宽度，不伸缩 */
  position: static; /* 移除相对定位 */
  top: auto; /* 移除向上移动 */
  z-index: auto; /* 重置z-index */
  margin: 0 left; /* 水平左对齐 */
}

.pest-calendar-container .pest-measures {
  height: 352px;    /* 今日虫情防治措施高度 */
  max-height: none !important;
  overflow-y: auto;
  width: calc(50%);
  flex: 0 0 calc(50% - 6px);
  position: absolute;
  right: 15px;
  top: -405px; /* 今日虫情防治措施高度向上移动 */
  z-index: 999 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.calendar-component {
  min-height: 150px;
  width: calc(100% - 100px) !important;
  max-width: calc(100% - 350px) !important;
  position: relative;
  top: -795px; /* 虫情预警日历高度向上移动*/
  left: -5px;
  z-index: 15;
  margin-left: auto;
  right: 0;
}

.pest-calendar-container :deep(.vc-container) {
  width: calc(100% - 100px) !important; /* 直接修改日历容器的宽度 */
  max-width: calc(100% - 100px) !important;
  margin-left: auto !important; /* 右对齐 */
}

.measures-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative; /* 使用相对定位 */
}

.measures-content {
  display: flex;
  gap: 10px;
  height: 100%;
  margin-top: 0;
  width: 100%;
  position: relative; /* 使用相对定位 */
  justify-content: flex-end; /* 内部元素右对齐 */
}

/* 响应式布局调整 */
@media (max-width: 1200px) {
  .measures-wrapper {
    min-height: 450px;
  }
  
  .measures-content {
    height: auto;
    margin-bottom: 12px;
    gap: 10px;
    justify-content: flex-end; /* 保持右对齐 */
  }
  
  .pest-calendar-container .pest-measures {
    height: 90px; /* 小屏幕下减少高度 */
    max-height: 90px;
    width: calc(50% - 6px);
    flex: 0 0 calc(50% - 6px);
    margin-left: auto; /* 保持右对齐 */
    top: -80px; /* 向上移动 */
    overflow-y: auto; /* 确保内容可滚动 */
  }
  
  .pest-calendar-container .pest-history {
    min-height: 150px;
    width: 350px; /* 固定宽度350px */
    flex: 0 0 350px;
    margin: 0 auto; /* 水平居中 */
  }
  
  .calendar-component,
  .pest-calendar-container :deep(.vc-container) {
    width: calc(100% - 100px) !important;
    max-width: calc(100% - 100px) !important;
    margin-left: auto !important;
  }
}

@media (max-width: 768px) {
  .stat-cards {
    flex-direction: column;
  }
}

/* 移除不再需要的样式，但保留必要样式 */
.stat-cards :deep(.change),
.stat-cards :deep(.visitors),
.stat-cards :deep(.visitors) svg,
.stat-cards :deep(.clicks),
.stat-cards :deep(.clicks) svg {
  display: none !important;
}

.chart-title .icon-svg {
  margin-right: 6px;
  color: #409EFF;
  width: 18px !important;
  height: 18px !important;
}

.section-title .icon-svg {
  margin-right: 6px;
  color: #409EFF;
  width: 18px !important;
  height: 18px !important;
}

/* 调整图表容器的宽度 */
.charts-container {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: flex-start;
}

.chart-section {
  width: auto;
  margin: 0;
}
</style> 